<template>
  <div class="flex-1">
    <nav class="bg-white mb-5">
      <ul class="flex px-2 sm:px-5 space-x-5 flex-nowrap overflow-x-auto">
        <li
          @click="changeState(0)"
          :class="[
            'flex-shrink-0 flex cursor-pointer border-b-4 items-center px-2 pb-1.5 pt-2 text-sm sm:text-base text-black-85',
            { 'border-yellow': this.state == 0 },
            { 'border-transparent': this.state != 0 },
          ]"
        >
          <img
            src="https://www.lucksec.cn/img/all.0bfd024f.svg"
            alt=""
            class="w-6 sm:w-10 mr-2.5"
          /><span>all</span>
        </li>
        <li
          @click="changeState(2)"
          :class="[
            'flex-shrink-0 flex cursor-pointer border-b-4 items-center px-2 pb-1.5 pt-2 text-sm sm:text-base text-black-70',
            { 'border-yellow': this.state == 2 },
            { 'border-transparent': this.state != 2 },
          ]"
        >
          <img
            src="https://www.lucksec.cn/img/pending.e6a634b6.svg"
            alt=""
            class="w-6 sm:w-10 mr-2.5"
          /><span>Processing</span>
        </li>
        <li
          @click="changeState(4)"
          :class="[
            'flex-shrink-0 flex cursor-pointer border-b-4 items-center px-2 pb-1.5 pt-2 text-sm sm:text-base text-black-70',
            { 'border-yellow': this.state == 4 },
            { 'border-transparent': this.state != 4 },
          ]"
        >
          <img
            src="https://www.lucksec.cn/img/delivered.1725d04d.svg"
            alt=""
            class="w-6 sm:w-10 mr-2.5"
          /><span>Processed</span>

        </li>
      </ul>
    </nav>
    <div>
      <!-- <div class="p-10 bg-white flex">
        <div class="m-auto text-center">
          <img
            src="https://www.lucksec.cn/img/default.d44be581.svg"
            width="150"
          />
          <div>暂未发现订单</div>
        </div>
      </div> -->
      <!-- 表格 -->
      <el-table :data="order" style="width: 100%" v-loading="loading" empty-text="No data">
        <el-table-column prop="out_trade_no" label="Transaction ID"> </el-table-column>
        <el-table-column prop="create_time" label="Recharge Time"> </el-table-column>
        <el-table-column label="Recharge Amount">
          <template slot-scope="scope">
            Ł{{ scope.row.price * scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="Status"></el-table-column>
      </el-table>

    </div>
    <!---->
  </div>
</template>
<script>
export default {
  created() {
    this.getOrders();
  },
  data() {
    return {
      order: [],
      state: 0,
      loading: true,
    };
  },
  methods: {
    getOrders() {
      this.$api
        .getOrders({
          zt: this.state,
        })
        .then((res) => {
          this.order = res.data.data;
          this.loading = false;
        });
    },
    changeState(state) {
      this.state = state;
      this.getOrders();
    },
  },
};
</script>
<style lang="scss"></style>
